<template>
<!--  TODO 新的协同文档共享页面,反正我觉得不如第一版,没必要搞这么复杂 -->
  <el-dialog title="共享文档" v-model="drawer" width="560px" :append-to-body="true" @close="close" center>
    <div class="member-add">
      <p>
        添加共享人
      </p>
      <el-cascader style="width: 300px"
                   v-model="selectUsers"
                   :options="treeData"
                   placeholder="请选择邀请人"
                   :props="cascaderProps"
                   clearable
                   size="small"
      >
      </el-cascader>
      <el-button type="primary" @click="submitShare" size="small" style="margin-left: 10px">添加</el-button>
    </div>

    <div class="member-list">
      <p v-if="list.invite == null || list.invite === ''" style="font-size: 20px;margin-top: 10px">当前暂无共享人</p>
      <el-descriptions
          v-else
          :column="2"
          border
          size="small"
      >
        <div v-for="(item,index) in list.invite" :key="index">
          <!--        <el-descriptions-item label="用户ID">-->
          <!--          {{item.id}}-->
          <!--        </el-descriptions-item>-->
          <el-descriptions-item label="用户名">
            {{item.user}}
          </el-descriptions-item>
          <el-descriptions-item label="权限">
            <el-select v-model="item.permissions" placeholder="请选择权限等级" style="width:120px;" size="small" @change="userAuthorityChange">
              <el-option v-for="item in userAuthorityOption" :label="item.label" :value="item.value"/>
            </el-select>
          </el-descriptions-item>
          <!--        <el-descriptions-item label="操作">-->
          <!--          <el-button @click="remove(item)" icon="ele-Delete" size="small" type="danger">删除</el-button>-->
          <!--        </el-descriptions-item>-->
        </div>
      </el-descriptions>
    </div>

    <div class="share-auth">
      <div class="share-auth-title">
        谁可分享文档
      </div>
      <el-select v-model="canShareDoc" size="small" placeholder="请选择" style="width: 200px">
        <el-option v-for="item in authorityOption" :value="item.value" :label="item.label"/>
      </el-select>
    </div>

    <div class="share-auth">
      <div class="share-auth-title">
        获取文档链接的人
      </div>
      <el-select v-model="docLinkAuthority" size="small" placeholder="请选择" style="width: 200px">
        <el-option v-for="item in docLinkAuthOption" :value="item.value" :label="item.label" />
      </el-select>
      <el-button type="primary" @click="copyLink" size="small" icon="ele-Link" style="margin-left: 10px">复制链接</el-button>
    </div>

  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs} from "vue";
import {getByFileLogId, update} from "../../../api/sys/cooperate";
import {ElMessage} from 'element-plus'
import api from '/@/api/commonApi'
import {getDeptTree} from "../../../api/sys/dept";
import {structureDepartmentData} from "../../../utils/common";

export default {
  name: "CooperateAuthorityV2",
  props: {
    fileLogId: {
      type: String,
      default: null
    },
    dialogDrawer: {
      type: Boolean,
      default: false
    },
  },
  setup(props, context) {
    const {dialogDrawer, fileLogId} = toRefs(props)
    let drawer = computed({
      get: () => {
        if (dialogDrawer.value) {
          shareReset()
          getList()
          getDeptTreeData()
        }
        return dialogDrawer.value;
      },
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })

    const state = reactive({
      canShareDoc:0,
      docLinkAuthority:1,
      selectUsers:null,
      docForm:{
        docAuthority:null,
      },
      cascaderProps: {
        value: "id",
        label: "name",
        children: "children",
        multiple: true
      },
      treeData:[],
      list:[],
      docAuthorityOption:[{label:'公共读写',value:0},{label:'公共读',value:1},{label:'仅邀请',value:2},{label:'私密的',value:3}],
      userAuthorityOption:[{label:'完全操作权限',value:'Full Access'},{label:'只读权限',value:'Read Only'},{label:'拒绝访问',value:'Deny Access'}],
      authorityOption:[{label:'可阅读的人',value:0},{label:'可编辑的人',value:1}],
      docLinkAuthOption:[{label:'仅阅读',value:0},{label:'阅读和下载',value:1},{label:'阅读、下载、编辑',value:2}],
      currentIsCooperate:1, //是否为协同文档 0->否  1->是
    })

    //获取数据
    const getList = () => {
      getByFileLogId(fileLogId.value).then(res=>{
        state.docForm.docAuthority = res.data.docAuthority
        if(res.data.invite !== null && res.data.invite !== ''){
          res.data.invite = JSON.parse(res.data.invite);
        }
        state.list = res.data
      })
    }

    //获取可共享人
    const getDeptTreeData = () => {
      getDeptTree("0").then(res => {
        state.treeData = res.data
        console.log(state.treeData)
        //此时还达不到可用的状态 需要对数据进行重构,这个按道理要在后端进行,但毕竟接口不是我写的
        console.log(structureDepartmentData(state.treeData,0),"new")
      })

    }

    //关闭
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }

    //修改用户的文档权限
    const userAuthorityChange = () => {
      update({id:state.list.id,invite:JSON.stringify(state.list.invite)}).then(res=>{
        if(res.data){
          ElMessage.success('修改成功！')
        }
      })
    }

    //添加共享人
    const submitShare = () => {
      let val = []
      for (let i = 0; i < state.selectUsers.length; i++) {
        if(state.selectUsers[i].length > 0){
          val.push(state.selectUsers[i][state.selectUsers[i].length - 1])
        }
      }

      api.addShareDoc({
        users: val,
        docIds: state.shareDocIds,
        isCooperate: state.currentIsCooperate
      }).then(res => {
        ElMessage.success("分享成功")
        shareReset()
        getList()
      })
    }

    // 分享框重置
    const shareReset = () => {
      state.shareDocIds = []
      state.selectUsers = []
      state.shareDocIds.push(fileLogId.value)
      // api.shareDocUsers({ ids: state.shareDocIds + '' }).then(res => {
      //   state.shareUserList = res.data
      // })
    }

    //复制链接
    const copyLink = () => {

    }

    return {
      ...toRefs(state),
      drawer,
      dialogDrawer,
      fileLogId,
      close,
      getDeptTreeData,
      userAuthorityChange,
      submitShare,
      shareReset,
      copyLink,

    }

  }
}
</script>

<style scoped lang="scss">
.add-member{

}

.member-list{
  margin: 10px 0px;
}

.share-auth{
  display: flex;
  text-align: end;
  margin: 10px 0px;

  .share-auth-title{
    padding-right: 10px;
    width: 130px;
  }
}

</style>
